<template>
  <view class="u-p-20 address-box u-m-20" v-for="(item,index) in list" :key="item.id">
    <view class="u-flex-y-center " @click="changeAddress(item)">
      <image src="@/static/images/01_22wz.png" class="address-img" mode=""></image>
      <view class="u-flex-1 u-p-r-30">
        <view class="u-flex-y-center">
          <text>{{item.real_name}}</text>
          <text class="u-m-l-20">{{item.phone}}</text>
        </view>
        <view class="address-text">
          {{item.province}}{{item.city}}{{item.district}}{{item.detail}}
        </view>
      </view>
    </view>
    <view class="address-action u-flex-y-center u-flex-between u-p-t-20">
      <view class="u-flex-y-center address-default" :class="item.is_default == 1?'active':''"
        @click="_changeDefault(item)">
        <image src="@/static/images/gouxuanadf.png" v-if="item.is_default != 1" mode=""></image>
        <image src="@/static/images/01_25nadf.png" v-else mode=""></image>
        <view>设为默认</view>
      </view>
      <view class="u-flex-y-center">
        <image src="@/static/images/bianji.png" @click="handleAaddress(item)" class="action-icon" mode=""></image>
        <image src="@/static/images/sahnchu.png" class="action-icon" @click="_addressDelete(item,index)" mode="">
        </image>
      </view>
    </view>
  </view>
  <view class="action-bar">
    <up-button type="warning" shape="circle" color="#F87610" @click="handleAaddress()">新增收货地址</up-button>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue';
  import { addressDelete, addressList, changeDefault } from '../../../config/api';
  import { onShow } from '@dcloudio/uni-app'
  const list = ref([])
  onShow(() => {
    _addressList()
  })
  const changeAddress = (item) => {
    uni.$emit('changeAddress', item)
    uni.navigateBack()
  }
  // 删除地址
  const _addressDelete = (row, index) => {
    uni.showModal({
      content: '确定删除这个地址吗',
      success: (res) => {
        if (res.confirm) {
          addressDelete({ id: row.id }).then(res => {
            list.value.splice(index, 1)
          })
        }
      }
    })

  }
  // 设置默认地址
  const _changeDefault = (row) => {
    if (row.is_default == 1) return
    changeDefault({ id: row.id }).then(res => {
      list.value = list.value.map(item => {
        if (item.id == row.id) item.is_default = 1
        else item.is_default = 0
        return item
      })
    })
  }
  // 地址列表
  const _addressList = () => {
    addressList().then(res => {
      list.value = res.data
    })
  }
  // 添加编辑地址
  const handleAaddress = (row = {}) => {
    uni.$u.route(`/pages/index/integralShop/editAddress?id=${row.id || ''}`)
  }
</script>

<style lang="scss" scoped>
  .address-box {
    background: #fff;
    border-radius: 20rpx;
    position: relative;

    text {
      font-size: 30rpx;
      font-weight: 800;
      color: #000;
    }

    text+text {
      font-size: 28rpx;
      font-weight: 500;
    }

    .address-text {
      margin-top: 12rpx;
      font-size: 26rpx;
      color: #666;
    }

    .address-img {
      width: 80rpx;
      height: 80rpx;
      margin-right: 20rpx;
    }

    .address-more {
      width: 14rpx;
      height: 20rpx;
      position: absolute;
      top: 0;
      right: 20rpx;
      bottom: 0;
      margin: auto;
    }
  }

  .address-action {
    border-top: 1px solid #eee;
    margin-top: 20rpx;

    .address-default {
      color: #000;
      font-size: 28rpx;
      font-weight: 500;

      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 12rpx;
      }
    }

    .active {
      color: #f87610;
    }

    .action-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 30rpx;
    }
  }

  .action-bar {
    padding: 20rpx;
    padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 16rpx solid #f8f8f8;
    z-index: 9;

  }
</style>